<template>
  <div class="form">
    <pro-table
    :tableSource="tableData"
    :columns="columns"
    @onload="getList"
    :shouldEdit="false"
    :initParam="{}"
    >
    <template #title="item">
      {{ t(item.dataIndex) }}
    </template>
    </pro-table>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from "vue"
import ProTable from "@/components/ProTable"
import type { TableProps } from "@/components/ProTable"
import fetchApi from "@/api/system/user"
import { useI18n } from 'vue-i18n'
// import {chain} from "lodash"
// import { GlobalStore } from "@/store/modules/global";
// const globalStore = GlobalStore()
const { t } = useI18n({inheritLocale: true,useScope: 'local'})

const tableData = ref<TableProps['tableSource']>({
  current:1,
  pageSize:20,
  total:0,
  list:[]
})

const disabledList = [{label:"禁用",value:"0",locale:{
  ch:"禁用",
  en:"disabled"
}},{label:"启用",value:"1",locale:{
  ch:"启用",
  en:"enable"
}}]

const deptList = ref<APISYSTEMDEPT.SysDeptList[]>()

const columns:TableProps['columns'] = [
  {
    width:100,
    search:true,
    dataIndex:"name",
    title: "姓名",
  },
  {
    width:100,
    search:true,
    searchType:"treeSelect",
    dataIndex:"dept_id",
    title: "部门",
  },
  {
		dataIndex: "disabled",
		title: "禁用",
		search: true,
    searchType: "select",
    align:"center",
    dic:'AUDIT_STATUS',
    enum: disabledList,
	},
  {
    dataIndex:"email",
    title: "邮箱",
  },
  {
    search:true,
    searchType:"date",
    dataIndex:"create_time",
    title: "创建时间",
  },
  {
    dataIndex:"update_time",
    title: "更新时间",
  },
  {
    width:300,
    dataIndex:"remark",
    title: "备注",
  }
]

const getList = async (params:any)=>{
  const {code,data} = await fetchApi.sysUserList(params)
  if(code === 200){
    tableData.value = data
  }
}

const getDeptList = async ()=>{
  const {code,data} = await fetchApi.sysUserList({page:1,limit:20})
  if(code === 200){
    deptList.value = data
  }
}

onMounted(()=>{
  getDeptList()
})

</script>

<i18n>
{
  "en": {
    "name": "Name",
    "dept_id": "DeptName",
    "disabled": "Disabled",
    "email": "Email",
    "create_time": "Create Time",
    "update_time": "Update Time",
    "remark": "Remark",
  },
  "ch": {
    "name": "姓名",
    "dept_id": "部门",
    "disabled": "禁用",
    "email": "邮箱",
    "create_time": "创建时间",
    "update_time": "更新时间",
    "remark": "备注",
  }
}
</i18n>


<style lang="less" scoped>
:deep(.ant-picker){
  width: 100%;
}
</style>